<template>
  <div class="app-container">
    <el-form :inline="true" :model="ebook" class="demo-form-inline">
      <el-form-item label="id">
        <el-input v-model="ebook.id" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="电子书名">
        <el-input v-model="ebook.bookName" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="电子书作者">
        <el-input v-model="ebook.bookAuthor" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="审核状态">
        <el-select v-model="ebook.bookStatus" placeholder="请选择">
          <el-option
            v-for="item in this.$store.state.dict.bookStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSearch">查询</el-button>
        <el-button @click="onClear">清空</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" @click="linkToAdd">新增电子书</el-button>
    <el-button type="danger" v-show="showDelBtn" @click="delEBooks"
      >删除</el-button
    >
    <el-table
      v-loading="listLoading"
      :data="ebooks"
      element-loading-text="Loading"
      highlight-current-row
      @selection-change="handleSelectionChange"
    >
      >

      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <!--
      <el-table-column label="电子书封面" width="300" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100%;height:100px"
            :src="imgPath+scope.row.ebookImg"
            fit="fit"
          />
        </template>
      </el-table-column>
      -->
      <el-table-column label="电子书名称" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.row.bookName }}
        </template>
      </el-table-column>

      <el-table-column label="电子书作者" width="150" align="center">
        <template slot-scope="scope">
          {{ scope.row.bookAuthor }}
        </template>
      </el-table-column>
      <!--
      <el-table-column label="电子书简介" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.row.bookInfo }}
        </template>
      </el-table-column>
      <el-table-column label="电子书描述" width="300" align="center">
        <template slot-scope="scope">
          {{ scope.row.bookRemarks }}
        </template>
      </el-table-column>
      -->
      <el-table-column label="价格" width="100" align="center">
        <template slot-scope="scope">
          {{ scope.row.price }}
        </template>
      </el-table-column>
      <el-table-column
        label="审核状态"
        :formatter="BookStatusFormate"
        width="95"
        align="center"
      >
      </el-table-column>
      <el-table-column label="排序号" width="95" align="center">
        <template slot-scope="scope">
          {{ scope.row.orderNum }}
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="created_at"
        label="创建时间"
        width="200"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>
            {{ scope.row.createTime }}
          </span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="250">
        <template slot-scope="scope">
          <el-button
            type="info"
            icon="el-icon-s-check"
            @click="checkEBook(scope.row.id)"
            circle
          ></el-button>
          <el-button
            type="info"
            icon="el-icon-download"
            @click="downloadEBook(scope.row.id)"
            circle
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-edit"
            circle
            @click="linkToEdit(scope.row.id)"
          />
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            @click="delEBook(scope.row.id)"
          />
        </template>
      </el-table-column>
    </el-table>
    <nav style="text-align: center">
      <el-pagination
        background
        @current-change="handlePageChange"
        :current-page="pageNo"
        :page-size="pageSize"
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </nav>
  </div>
</template>

<script>
import {
  getEBooksApi,
  delEBookApi,
  delEBooksApi,
  updateEBookApi,
} from "@/api/ebook";
import { BookStatusFormate } from "@/utils/MyFormate";
export default {
  data() {
    return {
      //imgPath:process.env.VUE_APP_BASE_API,
      downloadUrl: process.env.VUE_APP_BASE_API + "/ebook/file/",
      ebook: {},
      pageNo: 1,
      pageSize: 10,
      ebooks: [],
      listLoading: true,
      delEBookArray: [],
      showDelBtn: false,
      total: 0,
    };
  },
  created() {
    this.getEBooks(this.pageNo, this.pageSize, this.ebook);
  },
  methods: {
    BookStatusFormate,
    updateStatus(id, status) {
      const form = new FormData();
      form.append("id", id);
      form.append("bookStatus", status);
      return updateEBookApi(form);
    },
    checkEBook(id) {
      this.$confirm("正在审核电子书，是否审核通过?", "提示", {
        confirmButtonText: "通过",
        cancelButtonText: "不通过",
        cancelButtonClass: "btn_danger",
        type: "warning",
      })
        .then(() => {
          this.updateStatus(id, 1).then((response) => {
            this.$message({
              type: "success",
              message: "审核通过!",
            });
            this.getEBooks(this.pageNo, this.pageSize, this.ebook);
          });
        })
        .catch(() => {
          this.updateStatus(id, 2).then((response) => {
            this.$message({
              type: "warning",
              message: "审核不通过",
            });
            this.getEBooks(this.pageNo, this.pageSize, this.ebook);
          });
        });
    },
    handlePageChange(currentPage) {
      this.pageNo = currentPage;
      this.getEBooks(this.pageNo, this.pageSize, this.ebook);
    },
    handleSelectionChange(val) {
      if (val.length > 0) {
        this.showDelBtn = true;
      } else {
        this.showDelBtn = false;
      }
      this.delEBookArray = val;
    },
    delEBooks() {
      this.listLoading = true;
      delEBooksApi(this.delEBookArray).then((response) => {
        this.getEBooks(this.pageNo, this.pageSize);
        this.listLoading = false;
      });
    },
    linkToAdd() {
      this.$router.push("/content/ebook/add");
    },
    onSearch() {
      this.pageNo = 1;
      this.getEBooks(this.pageNo, this.pageSize, this.ebook);
    },
    onClear() {
      this.ebook = {};
      this.getEBooks(this.pageNo, this.pageSize, this.ebook);
    },
    getEBooks(pageNo, pageSize, ebook) {
      this.listLoading = true;
      getEBooksApi(pageNo, pageSize, this.ebook).then((response) => {
        this.ebooks = response.data.list;
        this.pageNo = response.data.pageNum;
        this.total = response.data.total;
        this.listLoading = false;
      });
    },
    downloadEBook(id) {
      window.open(this.downloadUrl + id);
    },
    linkToEdit(id) {
      this.$router.push({ name: "editebook", params: { id: id } });
    },
    delEBook(id) {
      this.listLoading = true;
      delEBookApi(id).then((response) => {
        this.getEBooks(this.pageNo, this.pageSize);
        this.listLoading = false;
      });
    },
  },
};
</script>
<style>
.btn_danger {
  background-color: rgb(194, 22, 65) !important;
  color: white !important;
}
</style>
